<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<style type="text/css">
  
/* 密码样式 */
.password-lable ul,li{
	list-style: none;
}
.password-div {
	text-align: center;
	font: 0;
	margin-left: 30px;
}
.password-div input{
	width: 1px;
	height: 1px;
	opacity: 0;
	border: 0;
}
.password-lable{
	height: 40px;
	clear: both;
	margin: 0px;
	margin-right: 30px;
	vertical-align: middle;
}
.password-lable li{
	float: left;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: 1px solid #dedede;
	margin-left: -1px;
}

/* 弹窗样式设置 */
#myModal {
	margin-top: 200px;
}
#payTitle {
	margin-left: 155px;
	font-size: 18px;
}
#payFooter {
	justify-content: center;
}
#confirmPassword {
	margin-right: 30px;
	margin-left: 10px;
}
#cancle {
	margin-left: 30px;
}
#payInfo {
	text-align: center;
	margin-bottom: 10px;
}
#passwordResult {
	text-align: center;
	color: red;
	margin-top: 5px;
}
</style>

<!-- <div class="container"> -->
  <!-- 按钮：用于打开支付框 -->
  <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    确认付款
  </button> -->
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h5 class="modal-title" id="payTitle">请 输 入 支 付 密 码</h5>
          <button type="button" class="close" data-dismiss="modal" id="closePay">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
        	<div id="payInfo">
        		<span id="cname">支付给XXX</span>￥:
        		<span id="price">价格</span>
        		<!-- 存储当前订单号 -->
        		<input type="hidden" id="orderId"> 
        	</div>
			<div class="password-div">
				<label for="password" class="password-lable">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<input id="password" type="password" name="password" maxlength="6"><br>
				</label>
			</div>
			<div id="passwordResult"></div>
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer" id="payFooter">
          <button type="button" class="btn btn-secondary" id="confirmPassword">确认</button>
		  <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancle">取消</button>
        </div>
   
      </div>
    </div>
  </div>
<!-- </div> -->
<script type="text/javascript">
	$(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
		var number = 6;   //定义输入最大值
		var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
		var list = $(".password-div ul li");  //定义list是li
		for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
			if(pw[i]){
				$(list[i]).text("·");
			}else{
				$(list[i]).text("");
			};
		};
	});
	
	$(".password-div ul").click(function(){      
		$("input[name = 'password']").val("");
		$("#password").focus();
		$(".password-div ul li").text("");
	}); 
	
	//点击取消按钮，清空密码框
	$("#cancle").click(function(){
		$(".password-div ul li").text("");
		$("#passwordResult").text("");
	});
	
	//关闭弹窗时，清空密码提示
	$("#closePay").click(function(){
		$("#passwordResult").text("");
	});
	
</script>
